<template>
	<view>
  <view class="index-list">
    <view class="index-list-item" v-for="(item,index) in topList" :key="index" @click="handlerToList(item.listId)">
      <view class="index-list-img">
        <image :src="item.coverImgUrl" mode=""></image>
        <text>{{item.updateFrequency}}</text>
      </view>
      
      <view class="index-list-text" >
        <view v-for="(item ,index) in item.tracks" :key="index">{{index+1}}.{{item.first}}-{{item.second}}</view>
      </view>
    </view>
    
  </view>
	</view>
</template>

<script>
  import {topList} from '@/common/api.js';
	export default {
		data() {
			return {
				topList:[]
			};
		},
    onLoad() {
      topList().then((res)=>{
        if(res.length){
          this.topList=res;
        }
      })
    },
    methods:{
      handlerToList(listId){
        uni.navigateTo({
          url:'/subpkg/music-list/music-list?listId='+listId
        })
      }
    }
	}
</script>

<style lang="scss">
  .index-list{
    margin: 0 30rpx;
    .index-list-item{
      display: flex;
      margin-bottom: 34rpx;
      .index-list-img{
        width: 232rpx;
        height: 232rpx;
        position: relative;
        border-radius: 30rpx;
        overflow: hidden;
        margin-right: 22rpx;
        image{
          width: 100%;
          height: 100%;
        }
        text{
          position: absolute;
          left: 12rpx;
          bottom: 16rpx;
          color: white;
          font-size: 20rpx;
        }
      }
      .index-list-text{
        width: 460rpx;
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
        font-size: 24rpx;
        line-height: 76rpx;
      }
    }
  }
</style>
